<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">修改登录密码</block>
		</cu-custom>
		<view style="padding: 20upx;">
			<form @submit="checkForm">
				<view style="border-radius: 15px;">
					<view class="cu-form-group">
						<view class="title">原密码</view>
						<input placeholder="输入密码" name="password" password v-model="password" />
					</view>
					<view class="cu-form-group">
						<view class="title">新密码</view>
						<input placeholder="输入密码" name="password" password v-model="password" />
					</view>
					<view class="cu-form-group">
						<view class="title">确认密码</view>
						<input placeholder="再次输入密码" name="password_" password v-model="password_" />
					</view>
				</view>

				<view class="padding flex flex-direction"><button type="primary" formType="submit" class="cu-btn bg-green margin-tb-sm lg">提交</button></view>
			</form>

		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				mobile: '',
				password: '',
				password_: '',
				msg_code: '',
				modalShow: false,
				modalContent: '',
				getMsgCodeTime: 60,
				getMsgCodeText: '获取验证码',
				isClickGetMsgCode: true,
				msg_code_: '',
			}
		},
		onLoad() {},
		computed: mapState({
			ctx: 'api'
		}),
		methods: {
			getMsgCode: function() {
				if (!this.mobile) {
					common.showToast( "请输入手机号码")
					return false;
				}
				if (!this.password) {
					common.showToast( "请输入密码")
					return false;
				}
				if (!this.password_) {
					common.showToast( "请输入确认密码")
					return false;
				}

				this.sendCode();
				this.setMsgCOdeTime();
			},
			setMsgCOdeTime: function() {
				if (this.getMsgCodeTime > 0) {
					this.isClickGetMsgCode = !this.isClickGetMsgCode;
					let clock = window.setInterval(() => {
						if (this.getMsgCodeTime > 0) {
							this.getMsgCodeTime--;
							this.getMsgCodeText = this.getMsgCodeTime + 's后重新发送';
						} else {
							this.isClickGetMsgCode = !this.isClickGetMsgCode;
							this.getMsgCodeTime = 5;
							this.getMsgCodeText = '获取验证码'
							clearInterval(clock);
						}
					}, 1000);
				}
			},
			sendCode: function() {
				
				request.get({
					url: urls.sendMessage.updatePassword,
					data: {
						mobile: this.mobile,
					},
					success: res => {
						common.showToast(res.msg,1);
					},
					fail: res => {},
					complete: res => {}
				})
			},
			checkForm: function(e) {
				//定义表单规则
				var rule = [{
						name: 'mobile',
						checkType: 'notnull',
						checkRule: '',
						errorMsg: '请输入手机号码'
					},
					{
						name: 'password',
						checkType: 'notnull',
						checkRule: '',
						errorMsg: '请输入密码'
					},
					{
						name: 'password_',
						checkType: 'notnull',
						checkRule: '',
						errorMsg: '请输入确认密码'
					},
					{
						name: 'msg_code',
						checkType: 'notnull',
						checkRule: '',
						errorMsg: '请输入短信验证码'
					}
				];

				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (!checkRes) {
					common.showToast(graceChecker.error);
					return;
				}
				if (this.password != this.password_) {
					common.showToast("两次密码不相同");
					return;
				}
				this.formSubmit();
			},
			formSubmit: function() {
				let data = {
					mobile: this.mobile,
					password: this.password,
					password_: this.password_,
					msgCode: this.msg_code,
				}
				console.info(data);
				request.get({
					url: urls.user.updatePassword,
					data: data,
					success: res => {
						common.showToast(res.msg,1);
						common.toPage(pages.login.login)
					},
					fail: res => {},
					complete: res => {}
				})
			}
		},
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
